<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>API Test and Examples Page</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style type="text/css">
    body {
      font-size:9pt;
      background: rgba(0, 0, 0, .05);
      color: #333;
      text-shadow: 0 1px 0 #fff;
      font: 14px helvetica,sans-serif;
      background: #ccc;
      background:    -moz-radial-gradient(circle, #aaa, #eee) no-repeat center center fixed;
      background: -webkit-radial-gradient(circle, #aaa, #eee) no-repeat center center fixed;
      background:     -ms-radial-gradient(circle, #aaa, #eee) no-repeat center center fixed;
      background:      -o-radial-gradient(circle, #aaa, #eee) no-repeat center center fixed;
      width: 1000px;
    }
    .define, #template {
      display: none;
    }
    .test_group {
      overflow: auto;
      width: 300px;
      float:left;
      color: #555;

      border-top: 1px solid #999;
      margin: 4px;
      padding: 4px 10px 4px 10px;
      background: #eee;
      background: -webkit-linear-gradient(#fff, #ccc);
      background:    -moz-linear-gradient(#fff, #ccc);
      background:     -ms-linear-gradient(#fff, #ccc);
      background:      -o-linear-gradient(#fff, #ccc);
      opacity: .9;
      box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
    }
    .test_group h2 {
      font-size: 10pt;
    }
    .test_group table {
      width: 100%;
    }
    
    #apikeyDIV {
      width: 100%
    }
  </style>
  <script type="text/javascript">
    $(document).ready(function() {
      $('input[type=button]').live('click', function() {
        var $test_group = $(this).closest('.test_group');
        var name = parseName($test_group.find('h2').text());

        var results_node = $test_group.find('.results');

        var params = {};
        $test_group.find('input[type=text]').each(function() {
          params[$(this).attr('name')] = $(this).val();
        });

        callFunction(name, results_node, params);
      });
      
      var template = $('#template')
      $('.define').each(function() {
        var functionName = parseName($(this).text());
        var parameters = parseParameters($(this).text());

        var testGroup = template.clone();

        testGroup.find('h2').text(functionName + "()");

        var table = testGroup.find('table');

        $(parameters).each(function(index, el) {
          table.prepend('<tr><td>' + el + ':</td>' +
                          '<td style="width:200px"><input type="text" size="10" name="' + el + '" /></td></tr>');
        });

        testGroup.css({display: "block"});
        testGroup.appendTo('body');
      });
    });

    function parseName(str)
    {
      return str.substring(0, str.indexOf('('));
    }

    function parseParameters(str)
    {
      // parse out the parameters by looking for parens
      var parens = str.substring(str.indexOf("("));
    
      // return empty array if there are no paremeters
      if(parens.length < 3)
      {
        return [];
      }

      // remove parens from string
      parens = parens.substring(1);
      parens = parens.substring(0, parens.length-1);

      return parens.split(',');
    }

    function callFunction(memberName, results_node, params) 
    {
      $('#result').text('Calling ' + memberName + "()...");
      
      params["apikey"]=$("#apikey").val();
      $.ajax({
        type: "GET",
        url: "/api/1/" + memberName,
        data: params,
        success: function(json,status,xhr) {
          results_node.text(xhr.responseText);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          results_node.html("textStatus: " + textStatus + "<br />errorThrown: " + errorThrown);
        }
      });
    }
  </script>
</head>
<body>
  <div id="apikeyDIV" class="test_group"><b>APIKEY: </b><input type="text" id="apikey"></div>
  <div class="test_group" id="template">
    <h2>createGroup()</h2>
    <table>
      <tr>
        <td class="buttonBox" colspan="2" style="text-align:right;"><input type="button" value="Run" /></td>
      </tr>
    </table>
    <div class="results"></div>
    
  </div>
  <div class="define">createGroup()</div>
  <div class="define">deleteGroup(groupID)</div>
  <div class="define">createGroupIfNotExistsFor(groupMapper)</div>
  <div class="define">listPads(groupID)</div>
  <div class="define">createPad(padID,text)</div>
  <div class="define">createGroupPad(groupID,padName,text)</div>
  <div class="define">createAuthor(name)</div>
  <div class="define">createAuthorIfNotExistsFor(authorMapper,name)</div>
  <div class="define">createSession(groupID,authorID,validUntil)</div>
  <div class="define">deleteSession(sessionID)</div>
  <div class="define">getSessionInfo(sessionID)</div>
  <div class="define">listSessionsOfGroup(groupID)</div>
  <div class="define">listSessionsOfAuthor(authorID)</div>
  <div class="define">getText(padID,rev)</div>
  <div class="define">setText(padID,text)</div>
  <div class="define">getRevisionsCount(padID)</div>
  <div class="define">getLastEdited(padID)</div>
  <div class="define">deletePad(padID)</div>
  <div class="define">getReadOnlyID(padID)</div>
  <div class="define">setPublicStatus(padID,publicStatus)</div>
  <div class="define">getPublicStatus(padID)</div>
  <div class="define">setPassword(padID,password)</div>
  <div class="define">isPasswordProtected(padID)</div>
</body>
</html>
